<template>
  <div class="messagetemplate">
    <div v-if="item.type === 1" class="messagetemplate_item">
      <router-link
        :to="{ name: 'USER', params: { usid: sitem.userId } }"
        v-for="(sitem, index) in item.content.follower"
        :key="'messagetemplate_sitem_' + index"
        >{{ sitem.nickName }}</router-link
      >
      <span>{{ item.content.message }}</span>
      <span>{{ getTimeFormate(item.content.followTime) }}</span>
    </div>
    <div v-if="item.type === 2" class="messagetemplate_item">
      <router-link
        :to="{ name: 'USER', params: { usid: sitem.userId } }"
        v-for="(sitem, index) in item.content.follower"
        :key="'messagetemplate_sitem_' + index"
        >{{ sitem.nickName }}</router-link
      >
      <span>{{ item.content.message }}</span>
      <p>
        <span>{{ getTimeFormate(item.content.followTime) }}</span>
        <span>{{ item.content.goods }}{{ $t("lang.赞") }}</span>
      </p>
    </div>
    <div v-if="item.type === 3" class="messagetemplate_item">
      <router-link
        :to="{
          name: 'USER',
          params: { usid: item.content.follower[0].userId },
        }"
        >{{ item.content.follower[0].nickName }}：</router-link
      >
      <router-link
        :to="{
          name: 'SNSMESSAGE',
          params: { usid: item.content.follower[0].userId },
        }"
      >
        <span class="messagetemplate_item_msg">{{ item.content.message }}</span>
        <span class="messagetemplate_item_time">{{
          getTimeFormate(item.content.followTime)
        }}</span></router-link
      >
      <!-- <div class="messagetemplate_item_reply" v-if="item.reply">
        {{ $t("lang.回复") }}：
        <span class="messagetemplate_item_msg">{{ item.reply.message }}</span>
        <span class="messagetemplate_item_time">{{
          getTimeFormate(item.reply.followTime)
        }}</span>
      </div> -->
    </div>
  </div>
</template>
<script>
export default {
  name: "MessageTemplate",
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {};
  },
  methods: {
    getTimeFormate(v) {
      return this.formatDate(v, "yyyy-MM-dd");
    },
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.messagetemplate {
  .messagetemplate_item {
    vertical-align: middle;
    text-align: left;
    a {
      margin: 0 5 / @base 0 0;
    }
    span {
      margin: 5 / @base 5 / @base 5 / @base 0;
      display: inline-block;
      &.messagetemplate_item_msg {
        display: inline;
        word-wrap: break-word;
      }
      &.messagetemplate_item_time {
        display: block;
        font-size: 12 / @base;
        color: #999;
      }
    }
    .messagetemplate_item_reply {
      margin: 5 / @base 0;
      span {
        &.messagetemplate_item_time {
          display: block;
        }
      }
    }
  }
}
</style>
